<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--sweetalert2-->
    <link href="../dist/sweetalert2.min.css" rel="stylesheet">
    <script src="../dist/sweetalert2.min.js" type="text/javascript"></script>


    <style>
        .swal2-popup {
            width: 1000px;
           color:red;
        }
    </style>
</head>
<body>

<script>




   async function fn(){


       const p = await Swal.fire({         //await 拿到异步函数执行的结果  才执行下面的逻辑       await必须使用在 async 修饰的函数中
           title: '请输入',
           html:
               '姓名<input id="swal-input1" class="swal2-input" maxlength="10">姓名<input id="swal-input1" class="swal2-input" maxlength="10"><br>' +         //maxlength  最多输入10个字符
               '年龄<input id="swal-input2" class="swal2-input"><br>'+
               '爱好<input id="swal-input3" class="swal2-input"><br>'+
               '地址<input id="swal-input4" class="swal2-input">',
           focusConfirm: true,
           preConfirm: () => {
               return [
                   document.getElementById('swal-input1').value,
                   document.getElementById('swal-input2').value,
                   document.getElementById('swal-input3').value,
                   document.getElementById('swal-input4').value
               ]
           },
           allowOutsideClick: false, //弹框外是否可点
           confirmButtonText:'提交',
           showCancelButton: true,
           cancelButtonText:
               '取消',
       })


       if (p) {

           console.log(p)              // formValues 数组对象

           Swal.fire(JSON.stringify(p.value))      //打印出填的值
       }
    }

    fn()

   console.log('同步在先')

</script>

</body>
</html>